<script lang="jsx" setup>
import { ref } from 'vue';

const form = ref({
  shippingMethod: null,
  type: null,
  difficulty: null,
  boardModel: null,
  manufactureStandard: null,
  surfaceProcessing: null,
  isAb: null,
  isHdi: null,
  waterMark: null,
  engineeringInstruction: null,
  ecnChangeContent: null,
  boardRequirement: null
});

const formList = [
  {
    type: 'select',
    key: 'shippingMethod',
    label: '出货方式',
    placeholder: '请选择出货方式',
    span: 8,
    selectOptions: [
      {
        label: 'Unit',
        value: 'Unit'
      },
      {
        label: '张',
        value: '张'
      }
    ]
  },
  {
    type: 'select',
    key: 'type',
    label: '板类型',
    placeholder: '请选择板类型',
    span: 8,
    selectOptions: [
      {
        label: '一般类型板',
        value: '一般类型板'
      },
      {
        label: '阻抗板',
        value: '阻抗板'
      },
      {
        label: '主机板',
        value: '主机板'
      },
      {
        label: '汽车板',
        value: '汽车板'
      },
      {
        label: '汽车板安全系统',
        value: '汽车板安全系统'
      },
      {
        label: '盲孔盲槽板',
        value: '盲孔盲槽板'
      },
      {
        label: '盲孔板',
        value: '盲孔板'
      },
      {
        label: '铝基板',
        value: '铝基板'
      },
      {
        label: '电源板',
        value: '电源板'
      },
      {
        label: '金手指板',
        value: '金手指板'
      },
      {
        label: '盲槽版',
        value: '盲槽版'
      },
      {
        label: '医疗板',
        value: '医疗板'
      }
    ]
  },
  {
    type: 'select',
    key: 'difficulty',
    label: '难度系数',
    placeholder: '请选择难度系数',
    span: 8,
    selectOptions: [
      {
        label: '一级难度',
        value: '一级难度'
      },
      {
        label: '二级难度',
        value: '二级难度'
      },
      {
        label: '普通难度',
        value: '普通难度'
      },
      {
        label: 'APQP',
        value: 'APQP'
      }
    ]
  },
  {
    type: 'input',
    key: 'boardModel',
    label: '板上型号',
    placeholder: '请输入板上型号',
    span: 8
  },
  {
    type: 'select',
    key: 'manufactureStandard',
    label: '制造依据',
    placeholder: '请选择制造依据',
    span: 8,
    selectOptions: [
      {
        label: 'IPC-A-600&6012 CLASS 2',
        value: 'IPC-A-600&6012 CLASS 2'
      },
      {
        label: 'IPC-A-600&6012 CLASS 3',
        value: 'IPC-A-600&6012 CLASS 3'
      }
    ]
  },
  {
    type: 'select',
    key: 'surfaceProcessing',
    label: '表面处理',
    placeholder: '请输入表面处理',
    span: 8,
    selectOptions: [
      {
        label: 'L-无铅喷锡',
        value: 'L-无铅喷锡'
      },
      {
        label: 'O-OSP',
        value: 'O-OSP'
      }
    ]
  },
  {
    type: 'checkbox',
    key: 'isAb',
    label: 'AB板',
    span: 8,
    selectOptions: [
      {
        label: '',
        value: '1'
      }
    ]
  },
  {
    type: 'checkbox',
    key: 'isHdi',
    label: 'HDI板',
    span: 8,
    selectOptions: [
      {
        label: '',
        value: '1'
      }
    ]
  },
  {
    type: 'select',
    key: 'waterMark',
    label: '水印',
    placeholder: '请输入水印',
    span: 8,
    selectOptions: [
      {
        label: '800重要客户',
        value: '800重要客户'
      },
      {
        label: 'DY客户汽车板',
        value: 'DY客户汽车板'
      }
    ]
  },
  {
    type: 'textarea',
    key: 'engineeringInstruction',
    label: '工程指示',
    placeholder: '请输入工程指示',
    span: 24,
    textareaRows: 5
  },
  {
    type: 'textarea',
    key: 'ecnChangeContent',
    label: 'ECN更改内容',
    placeholder: '请输入ECN更改内容',
    span: 24,
    textareaRows: 5
  },
  {
    type: 'textarea',
    key: 'boardRequirement',
    label: '做板要求',
    placeholder: '请输入做板要求',
    span: 24,
    textareaRows: 5
  }
];
</script>

<template>
  <div class="global-information">
    <div class="header">
      <AButton type="primary" class="mini-btn mr-8px" size="small" ghost>
        <template #icon>
          <SvgIcon local-icon="edit-2" class="ml-4px mr-4px text-16px" />
        </template>
        修改
      </AButton>
      <AButton type="primary" class="mini-btn mr-8px" size="small" ghost>
        <template #icon>
          <SvgIcon local-icon="set" class="ml-4px mr-4px text-16px" />
        </template>
        AB板设置
      </AButton>
      <AButton type="primary" class="mini-btn mr-8px" size="small" ghost>
        <template #icon>
          <SvgIcon local-icon="unset" class="ml-4px mr-4px text-16px" />
        </template>
        取消AB板设置
      </AButton>
      <AButton type="primary" class="mini-btn mr-8px" size="small" ghost disabled>
        <template #icon>
          <SvgIcon local-icon="save" class="ml-4px mr-4px text-16px" />
        </template>
        保存
      </AButton>

      <AButton type="primary" class="mini-btn mr-8px" size="small" ghost disabled>
        <template #icon>
          <SvgIcon local-icon="cancel" class="ml-4px mr-4px text-16px" />
        </template>
        取消
      </AButton>
    </div>
    <div class="global-information">
      <Form v-model:model="form" :form-list="formList"></Form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.global-information {
  padding-top: 10px;
  :deep(.ant-form) {
    .ant-row {
      .ant-form-item {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
